  <template>
    <div class="common-layout">
      <el-container>
        <el-header> 
          <div class="wrapper flex-between">
            <div class="flex-left">
              <div class="text">后台
             </div>
           </div>
          </div>
       </el-header>
        <el-container style="height: 100%; overflow-y: hidden">
          <el-aside width="200px" class="aside">
            <el-scrollbar style="height: 100%">
            <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            style="height: 100%"
            background-color="#333"
            text-color="#fff"
            router
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>导航</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/Home">
                    <el-menu-item index="1" style="text-align: left">
                      <span>导入Excel</span>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
                <el-menu-item-group>
                  <router-link to="/GenerateCheckTemplate">
                    <el-menu-item index="2" style="text-align: left">
                      <span>生成核验系统模板</span>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
                <el-menu-item-group>
                  <router-link to="/ReceivingAddressManagement">
                    <el-menu-item index="3" style="text-align: left">
                      <span>收货地址管理</span>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
          </el-aside>
          <el-main class="main">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  
  const isCollapse = ref(true)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>

<style lang="less">
 @import "~@/style/variables.less";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.aside {
  position: fixed;
  top: 58px;
  left: 0;
  width: 200px;
  margin-top: 2px;
  height: 110% !important;
  background-color: #333;
}
/deep/.el-scrollbar__wrap {
  overflow: scroll;
  height: 85%;
  margin-right: -18px !important;
  overflow-x: hidden;
}
.main {
  position: relative;
  margin-left: 200px;
}
.wrapper {
  width: 100%;
  height: 60px;
  margin-bottom: 15px;
  align-items: center;
  background-color: @bg;

  .text {
    position: absolute;
    left: 8px;
    top: 10px;
    width: 180px;
    font-size: 29px;
    font-weight: 700;
    color: white;
  }

  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  /deep/.el-button--primary {
    color: #fff;
    background-color: @bg !important;
    border-color: @bg !important;
  }

  /deep/.el-button--info {
    color: @bg;
    background-color: #fff;
    border-color: #fff;
    font-size: 22px;
  }
  /deep/.el-button.is-circle {
    border-radius: 50%;
    padding: 6px;
  }
  /deep/.el-badge__content {
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 13px;
    line-height: 13px;
    padding: 0 3px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
  }
}
#app, body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
